<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 179 172"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path fill="#0389FF" d="M22.895 0h79.093c12.489 0 22.896 10.71 22.896 23.564v10.71h31.221C168.593 34.275 179 44.987 179 57.84v68.549c0 12.853-10.407 23.564-22.895 23.564h-25.81l2.498 13.71c.832 3.427-1.665 6.855-4.995 7.712-1.666.428-2.914 0-4.163-.857l-36.217-20.565H47.872c-12.488 0-22.895-10.711-22.895-23.564V94.255h-2.082C10.407 94.255 0 83.545 0 70.692V23.564C0 10.71 10.407 0 22.895 0Zm14.57 126.388c0 5.998 4.58 10.711 10.407 10.711H89.5c1.249 0 2.082.428 2.914.857l25.809 14.567-1.665-7.712c-.832-3.428 1.665-6.855 4.996-7.712h34.551c5.828 0 10.407-4.713 10.407-10.711v-68.55c0-5.998-4.579-10.71-10.407-10.71H47.872c-5.828 0-10.407 4.712-10.407 10.71v68.55ZM12.488 70.692c0 5.998 4.58 10.71 10.407 10.71h2.082V57.84c0-12.853 10.407-23.564 22.895-23.564h64.523V23.564c0-5.998-4.579-10.711-10.407-10.711H22.895c-5.828 0-10.407 4.713-10.407 10.71v47.129Z"/><path fill="#fff" d="M102.261 53.61c-7.118-.429-13.819 2.148-18.844 6.871-3.768 3.865-5.443 9.018-5.443 14.6 0 3.436 2.93 6.441 6.28 6.441 3.351 0 6.282-3.005 6.282-6.44 0-2.148.838-3.865 2.094-5.154 2.931-2.147 6.281-3.435 9.631-3.005 2.932-.43 5.863.858 7.957 3.005 1.256 2.147 1.675 4.724 1.256 6.871-.838 2.576-2.931 3.865-6.281 6.441-5.025 3.006-12.563 8.159-12.563 19.753 0 3.436 2.931 6.441 6.281 6.441 3.35 0 6.282-3.005 6.282-6.441 0-4.294 1.675-5.582 6.7-8.588 5.862-3.006 10.05-7.73 12.144-14.17 2.931-10.736-3.351-22.33-13.819-25.336-3.35-.859-5.444-1.288-7.957-1.288Zm-10.05 67.419c0 1.708.662 3.346 1.84 4.554a6.204 6.204 0 0 0 4.442 1.887 6.204 6.204 0 0 0 4.441-1.887 6.525 6.525 0 0 0 1.84-4.554 6.525 6.525 0 0 0-1.84-4.555 6.204 6.204 0 0 0-4.441-1.887 6.204 6.204 0 0 0-4.442 1.887 6.525 6.525 0 0 0-1.84 4.555Z"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Solutionsfaq extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
